<template>
  <md-nav-bar title="数字分身生成记录" />
  <view
    class="container"
    :style="{
      width: '100%',
      height: `calc(100vh - 44px - ${data.statusBarHeight})`,
    }">
    <view class="content">
      <md-page-list :api="cozeGetPicRecord" resKey="data" @change="pageChange">
        <view class="card" v-for="item in data.list" :key="item" @click="() => preview(item.result_image)">
          <!-- 图片 -->
          <image class="image" :src="item.result_image" mode="aspectFill" />
          <view class="date">{{ item.createtime }}</view>
          <!-- 下载按钮 -->
          <image
            @click.stop="() => download(item.result_image)"
            class="download"
            src="https://jogging.qzctdg.com/uploads/ads/20251111/472d6999f72d5701ac337c8009457651.png" />
        </view>
      </md-page-list>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
// 组件
import { onLoad } from '@dcloudio/uni-app';
import { cozeGetPicRecord } from '@/api';
const data = reactive<any>({
  statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
  list: [],
});

const preview = (url: string) => {
  uni.previewImage({
    current: url,
    urls: data.list.map((item: any) => item.result_image),
  });
};

const download = (url: string) => {
  uni.downloadFile({
    url,
    success: res => {
      if (res.statusCode === 200) {
        uni.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: () => {
            uni.showToast({
              title: '保存成功',
              icon: 'success',
            });
          },
          fail: () => {
            uni.showToast({
              title: '保存失败',
              icon: 'error',
            });
          },
        });
      }
    },
    fail: () => {
      uni.showToast({
        title: '下载失败',
        icon: 'error',
      });
    },
  });
};

const pageChange = (list: any[]) => {
  data.list = list;
};

onLoad(() => {
  const configInfo = uni.getStorageSync('configInfo') ? JSON.parse(uni.getStorageSync('configInfo')) : '';
  if (configInfo) {
    data.configInfo = configInfo;
  }
});
</script>
<style lang="scss" scoped>
.container {
  background: url('https://jogging.qzctdg.com/uploads/ads/20251111/ecde098e1bb70f09e62b3c78e24580b6.png') center/cover
    no-repeat;
  padding: 46rpx 51rpx;
  box-sizing: border-box;
  overflow: auto;
  .content {
    display: flex;
    flex-wrap: wrap;
    gap: 40rpx;
    ::v-deep .mescroll-empty {
      width: calc(100vw - 102rpx);
    }
    .card {
      width: 300rpx;
      height: 380rpx;
      background: #fffcef;
      border-radius: 30rpx;
      position: relative;
      display: inline-flex;
      &:nth-of-type(even) {
        margin-right: 40rpx;
      }
      .image {
        width: 300rpx;
        height: 380rpx;
        border-radius: 30rpx;
      }
      .date {
        position: absolute;
        bottom: 0;
        left: 0;
        border-radius: 0 0 30rpx 30rpx;
        background: rgba(0, 0, 0, 0.5);
        text-align: center;
        color: #f2d27d;
        width: 100%;
        height: 52.6rpx;
        line-height: 52.6rpx;
        z-index: 1;
        font-size: 28rpx;
      }
      .download {
        width: 93rpx;
        height: 89rpx;
        position: absolute;
        bottom: -14rpx;
        right: -14rpx;
        z-index: 2;
      }
    }
  }
}
</style>
an
